<template>
  <!-- {{ scope.row.chaocai }}{{ scope.row.time }} -->
  <el-table class="elTable" :data="tableData" style="width: 100%" :border="true" @cell-click="goclick" :cell-class-name="cellClassName" :cell-style="selectedstyle" :header-cell-style="{ borderColor: '#ccc' }">
    <el-table-column prop="zhaopai,price" label="招牌菜" min-width="70" align="left">
      <template #default="scope">
        <div v-html="scope.row.zhaopai"></div>
        <div v-html="scope.row.price"></div>
      </template>
    </el-table-column>
    <el-table-column prop="chaocai,price1" label="炒菜" min-width="70" align="left">
      <template #default="scope">
        <div v-html="scope.row.chaocai"></div>
        <div v-html="scope.row.price1"></div>
      </template>
    </el-table-column>
    <el-table-column prop="chaocai,price1" label="小吃" min-width="70" align="left">
      <template #default="scope">
        <div v-html="scope.row.chaocai"></div>
        <div v-html="scope.row.price1"></div>
      </template>
    </el-table-column>
    <el-table-column prop="duntang,price2" label="炖汤" min-width="70" align="left"
      ><template #default="scope">
        <div v-html="scope.row.duntang"></div>
        <div v-html="scope.row.price2"></div>
      </template>
    </el-table-column>
  </el-table>

  <div class="fy">
    <el-button type="primary" @click="fy1">首页</el-button>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="fn" />
    <el-button type="primary" @click="fy2">尾页</el-button>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { caiApi } from '@/api/api.js'
import axios from 'axios'
import '../../../../../mock/goods.js'

const total = ref(0)

// 设置当前页数为1
const currentPage = ref(1)

const tableData = ref([])

// const scope = ref('')

const getData = async () => {
  const res = await caiApi({ currentPage: currentPage.value, pageSize: 10 })

  // console.log(res.data)
  tableData.value = res.data.result
  total.value = res.data.total
  localStorage.setItem('currentPage', currentPage.value)
}

//页码切换的数据
const fn = (num) => {
  currentPage.value = num
  localStorage.setItem('currentPage', currentPage.value)
}
//监听页码的改变直接做请求
watch(currentPage, () => {
  getData()
})

// 首页尾页
const fy1 = () => {
  currentPage.value = 1
}
const fy2 = () => {
  fn(total.value / 10)
}

onMounted(() => {
  if (localStorage.getItem('currentPage')) {
    currentPage.value = localStorage.getItem('currentPage')
  }
  getData()
})

const row1 = ref('')
const column1 = ref('')
//每个单元格点击
const goclick = (row, column, cell, event) => {
  row1.value = row
  column1.value = column
}

const cellClassName = ({ row, column, rowIndex, columnIndex }) => {}

const selectedstyle = (row, column, rowIndex, columnIndex) => {
  if (row1.value === row.row && column1.value === row.column) {
    return { 'background-color': '#fde2e2d9', 'border-color': '#ccc' }
  } else {
    return { 'background-color': '#fff', 'border-color': '#ccc' }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-table__header tr) ,//修改th表头高度
:deep(.el-table__header th) {
  padding: 0;
  height: 30px;
  font-size: 14px;
  line-height: 16px;
  background-color: '#edeae0';
  border-bottom: 1px solid rgb(0, 0, 0);
}

// 修改分页
.fy {
  width: 100%;
  height: 60px;
  background-color: #fff;

  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-pagination {
    justify-content: center;

    padding: 6px;
    .btn-prev,
    .el-icon {
      margin-top: 8px;
    }
  }
}
// :deep(.el-table__cell) {
//   :deep(.cell) {
//     display: flex;
//     flex-direction: column;
//   }
// }

// 边框
:deep(.el-table__row .el-table__cell .cell) {
  line-height: 16px;
  // border: 1px solid #ccc;
}

.elTable {
  border: 1px solid #ccc;
}
</style>
